﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="../../../lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
        <script src="../../../lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function ()
        {
            var jsonObj = {};
            jsonObj.Rows = [
                { id: 3, name: "林三", sex: "男", birthday: "1989/01/12" },
                { id: 43, name: "陈丽", sex: "女", birthday: "1989/01/12" },
                { id: 33, name: "啊三", sex: "男", birthday: "1981/12/12" },
                { id: 34, name: "表三", sex: "男", birthday: "1983/01/12" },
                { id: 43, name: "陈丽", sex: "女", birthday: "1989/01/12" },
                { id: 33, name: "成三", sex: "男", birthday: "1989/11/23" },
                { id: 34, name: "都三", sex: "女", birthday: "1989/04/12" },
                { id: 324, name: "鄂三", sex: "男", birthday: "1999/05/15" },
                { id: 344, name: "林三", sex: "男", birthday: "1969/02/21" },
                { id: 1, name: "王开", sex: "男", birthday: "1989/01/12" }
            ];
            $("#maingrid").ligerGrid({
                columns: [
                { display: '', width: 30, isAllowHide: false, name: 'checkbox', isSort: false,
                    render: function (row)
                    {
                        var html = '<input type ="checkbox" rowid ="' + row.id + '">';
                        return html;
                    },
                    headerRender: function (column)
                    {
                        var html = '<input type ="checkbox" onclick="selectAll(this)">';
                        return html;
                    }
                },
                { display: '主键', name: 'id', width: 50, type: 'int' },
                { display: '名字', name: 'name', width: 50 },
                { display: '性别', name: 'sex', width: 50, isSort: false
                },
                { display: '生日', name: 'birthday', type: 'date', width: 100 },
                {
                    display: '模板列', isAllowHide: false,
                    render: function (row)
                    {
                        var html = '<a href="#" onclick="onedit(' + row.id + ')">编辑</a>';
                        return html;
                    }
                }
                ],width:'100%',
                data: jsonObj, 
                pageSizeOptions: [5, 10, 15, 20] 
            });
        });
        function selectAll(obj)
        {
            $("#maingrid td[columnname=checkbox]").find(":checkbox").each(function ()
            {
                this.checked = obj.checked; 
            });
        }
        function onedit(id)
        {
            alert("您选中的ID是" + id);
        }
        function showalert(content)
        {
            $.ligerMessageBox.alert('提示内容', content);
        }
        function getSelectedIds()
        {
            var rowids = "";
            $("#maingrid .l-grid-row td[columnindex=0]").find(":checkbox").each(function ()
            {
                if (this.checked)
                    rowids += $(this).attr("rowid") + ",";
            });
            if (rowids.length > 0) rowids = rowids.substr(0, rowids.length - 1);
            alert(rowids);
        }
        function getSelected()
        {
            var manager = $("#maingrid").ligerGetGridManager();
            var row = manager.getSelectedRow();
            alert("您选择的是:" + row.name + " | " + row.birthday);
        }
    </script>
</head>
<body>

    <div id="maingrid"></div>
   <br />
   <a class="l-button" style="width:120px" onclick="getSelectedIds()">获取选中的值(复选框)</a>
   <br />
   <a class="l-button" style="width:120px" onclick="getSelected()">获取选中的值(选择行)</a> <div style="display:none;">
   
</div>
</body>
</html>
